<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>查看附近酒店</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.indexedlist.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style>
			.mui-content {
				margin-bottom: 3.3rem;
			}
			
			.hotel-header .collect {
				position: absolute;
				right: 0.6rem;
				height: 2.2rem;
				line-height: 2.2rem;
			}
			
			.discount {
				background-image: url(../styles/images/discount.png);
				background-size: cover;
				width: 100%;
				height: 4rem;
				margin: 0.8rem auto 0.8rem;
			}
			
			.cur-location {
				height: 2rem;
				line-height: 2rem;
			}
			
			.local-icon {
				width: 0.6rem;
				height: 0.8rem;
				vertical-align: middle;
			}
			
			.hotel-list {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0.5rem 0.6rem;
			}
			
			.hotel-list-img {
				font-size: 0;
				margin-right: 0.9rem;
			}
			
			.hotel-list-info {
				display: flex;
				flex-direction: column;
				flex: 2;
			}
			
			.info-title {
				font-size: 0.7rem;
			}
			
			.info-wifi {
				font-size: 0.6rem;
			}
			
			.info-font-10 {
				font-size: 0.5rem;
			}
			
			.hotel-list-price {
				margin-right: 0.8rem;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
			
			.hotel-list-price span {
				color: #ff3399;
			}
			
			.bargain-icon {
				margin-right: 1rem;
			}
			
			.info-content-top {
				font-size: 0.8rem;
			}
			
			.info-content-bottom span {
				font-size: 0.6rem;
				color: #666;
			}
			
			.info-content-bottom span.right30 {
				position: absolute;
				right: 1.5rem;
			}
			
			.mui-table-view:before {
				top: -0.05rem;
			}
			
			.mui-table-view-cell:after {
				left: 0;
			}
			
			.mui-input-row {
				font-size: 0.7rem;
				background-color: #fff;
				padding: 0 0.6rem;
			}
			
			.hotel-fixed-area {
				position: absolute;
				right: 0.6rem;
			}
			
			.mui-input-row .hotel-fixed-area {
				position: absolute;
				top: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">周边（500家）</h1>
			<a class="collect" href="#">
				<img src="../styles/images/collect1.png" style="margin-right: 0.6rem;" data-url="./collection-null.html" />
				<img src="../styles/images/search.png" />
			</a>
		</header>
		<div class="mui-content">
			<div class="mui-table-view-cell mui-input-row cur-location">
				<span class="cur-location">
					当前定位：<span>深圳市软件产业基地</span>
				</span>
				<div class="hotel-fixed-area">
					<img class="local-icon" src="../styles/images/local-icon.png" />
				</div>
			</div>
			<div class="discount"></div>
			<ul class="mui-table-view mui-content-body">
				<li class="hotel-list mui-table-view-cell info-header">
					<div class="bargain-icon">
						<img src="../styles/images/bargain-icon.png" />
					</div>
					<div class="info-content">
						<span class="info-content-top">今日特价</span>
						<div class="info-content-bottom">
							<span>共55家</span>
							<span class="right30">比爱爱网站优惠30%以上</span>
						</div>
					</div>
					<div class="hotel-fixed-area">
						<img src="../styles/images/go-icon.png" />
					</div>
				</li>
				<li class="mui-table-view-cell hotel-list" data-url="./hotel-detail2.html">
					<div class="hotel-list-img">
						<img src="../styles/images/avatar-icon1.png" />
					</div>
					<div class="hotel-list-info">
						<span class="info-title">金广快捷（深圳会展酒店）</span>
						<span class="info-wifi"><span style="color:#3399ff;">p&nbsp;&nbsp;</span><span style="color:#ff8d1d;">WIFI&nbsp;&nbsp;</span><span style="color:#37c7aa;">周边特价&nbsp;&nbsp;</span></span>
						<span class="info-font-10">经济型 89%推荐率</span>
						<span class="info-font-10">距离0.5公里</span>
					</div>
					<div class="hotel-list-price">
						<span>￥298起</span>
						<img src="../styles/images/fan-icon.png" />
					</div>
					<div class="hotel-fixed-area">
						<img src="../styles/images/go-icon.png" />
					</div>
				</li>
				<li class="mui-table-view-cell hotel-list">
					<div class="hotel-list-img">
						<img src="../styles/images/avatar-icon2.png" />
					</div>
					<div class="hotel-list-info">
						<span class="info-title">南国连锁酒店（深圳瑞昌宾馆）</span>
						<span class="info-wifi"><span style="color:#3399ff;">p&nbsp;&nbsp;</span><span style="color:#ff8d1d;">WIFI&nbsp;&nbsp;</span></span>
						<span class="info-font-10">豪华型 79%推荐率</span>
						<span class="info-font-10">距离0.1公里</span>
					</div>
					<div class="hotel-list-price">
						<span>￥120起</span>
						<img src="../styles/images/fan-icon.png" />
					</div>
					<div class="hotel-fixed-area">
						<img src="../styles/images/go-icon.png" />
					</div>
				</li>
				<li class="mui-table-view-cell hotel-list">
					<div class="hotel-list-img">
						<img src="../styles/images/avatar-icon3.png" />
					</div>
					<div class="hotel-list-info">
						<span class="info-title">先锋公寓（深圳会展酒店）</span>
						<span class="info-wifi"><span style="color:#ff8d1d;">WIFI&nbsp;&nbsp;</span><span style="color:#37c7aa;">公寓&nbsp;&nbsp;</span></span>
						<span class="info-font-10">经济型 89%推荐率</span>
						<span class="info-font-10">距离0.5公里</span>
					</div>
					<div class="hotel-list-price">
						<span>￥198起</span>
						<img src="../styles/images/fan-icon.png" />
					</div>
					<div class="hotel-fixed-area">
						<img src="../styles/images/go-icon.png" />
					</div>
				</li>
				<li class="mui-table-view-cell hotel-list">
					<div class="hotel-list-img">
						<img src="../styles/images/avatar-icon4.png" />
					</div>
					<div class="hotel-list-info">
						<span class="info-title">长安酒店（深圳会展酒店）</span>
						<span class="info-wifi"><span style="color:#3399ff;">p&nbsp;&nbsp;</span><span style="color:#ff8d1d;">WIFI&nbsp;&nbsp;</span><span style="color:#37c7aa;">周边特价&nbsp;&nbsp;</span></span>
						<span class="info-font-10">经济型 89%推荐率</span>
						<span class="info-font-10">距离0.5公里</span>
					</div>
					<div class="hotel-list-price">
						<span>￥193起</span>
						<img src="../styles/images/fan-icon.png" />
					</div>
					<div class="hotel-fixed-area">
						<img src="../styles/images/go-icon.png" />
					</div>
				</li>
			</ul>
		</div>
		<div class="mask" style="background-color: rgba(0,0,0,0.5);z-index: 100;">

		</div>
		<footer class="hotel-footer">
			<ul class="hotel-footer-menu hotel-footer-menu-c4">
				<li data-url='./query-filter.html'><i class="fa fa-filter"></i>筛选</li>
				<li data-url='./area-filter.html'><i class="fa fa-map-marker"></i>位置区域</li>
				<li data-event="tap>setPriceFilter"><i class="fa fa-cny"></i>价格/星级</li>
				<li data-event="tap>pickWelcomeDegree"><i class="fa fa-arrow-down"></i>欢迎度</li>
			</ul>
		</footer>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./index.js'></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>